<template>
  <div class="bg">
    <div class="container">
      <div class="total">
        支付总金额<h2>￥{{price}}</h2>
      </div>
      <div class="pay">
        <div class="left">
          <h2>微信支付</h2>
          <div class="box">
            <canvas ref="canvasRef" class="canvas"></canvas>
            <p>请使用微信扫一扫</p>
            <span>扫描二维码支付</span>
          </div>
        </div>
        <div class="right">
          <img src="http://157.122.54.189:9093/images/wx-sweep2.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcode'
export default {
  data(){
    return{
      price:0,
      orderInfo:null,
      timer:null
    }
  },
  destroyed() {
    if(this.timer){
      clearTimeout(this.timer)
    }
  },
  methods: {
    async getOrder(){
      var token =this.$store.state.user.userInfo.token;
      const {data:res} = await this.$axios({
        url:'/airorders/'+this.$route.query.id,
        headers:{'Authorization':'Bearer '+token}
      })
      console.log(11)
      console.log(res)
      this.orderInfo = res
      this.price = res.price
      // 第一个参数为canvas的dom元素
      // 第二个参数是要变成二维码的连接
      QRCode.toCanvas(this.$refs.canvasRef,res.payInfo.code_url)
      // 显示二维码之后，不断请求付款状态
      this.getCheackPay()
    },
    getCheackPay(){
      this.$axios({
        method:'POST',
        url:'/airorders/checkpay',
        headers:{Authorization:'Bearer '+this.$store.state.user.userInfo.token},
        data:{
          id:this.orderInfo.id,
          nonce_str:this.orderInfo.price,
          out_trade_no:this.orderInfo.payInfo.order_no
        }
      }).then(res=>{
        console.log(res.data)
        if(res.data.trade_state=='NOTPAY'){
          this.timer = setTimeout(() => {
            this.getCheackPay()
          }, 2000);
        }else if(res.data.trade_state=='SUCCESS'){
          this.$message.success('订单支付成功')
          setTimeout(() => {
            this.$router.replace('/air')
          }, 2000);
        }
      })
    }
  },
  watch: {
    // 每次加载页面vuex不会立即有数据，所有需要监听
    '$store.state.user.userInfo.token':{
      handler(){
        if(this.$store.state.user.userInfo.token){
          this.getOrder()
        }
      },
      immediate:true
    }
  },
}
</script>
<style lang="less" scoped>
.bg{
  padding-bottom: 20px;
  background: #f5f5f5;
  .container{
  width: 1000px;
  min-width: 1000px;
  margin:0 auto;
  padding-top:20px;
}
}
.total{
  height:60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  h2{
    color:#ff4500;
    font-weight: 400;
  }
}
.pay{
  background:#fff;
  height: 650px;
  border-top:5px solid #ffa500;
  display: flex;
  padding:20px;
  margin-bottom: 20px;
  .left{
    flex:1;
    position: relative;
    h2{
      line-height: 60px;
      height:60px;
      font-size: 26px;
      font-weight: 400;
    }
    .box{
      position: absolute;
      width: 260px;
      height:340px;
      border:1px solid #ddd;
      left:100px;
      top:150px;
      .canvas{
        width: 200px;
        height:200px;
        // background:pink;
        margin:30px auto;
        display: block;

      }
      p{
        font-size: 18px;
        text-align: center;
        margin-bottom:10px;
      }
      span{
        display: block;
        text-align: center;
      }
    }
  }
  .right{
    // height:00px;
    align-self: center;
    flex:1;
  }
}
</style>